<template>
  <view class="good-big" @click="handleFoodPreview">
	  <view class="title">{{title}}</view>
	  <view class="desc1">{{desc1}}</view>
	  <view class="desc2">
		  <view class="text">
		  	<text>都是最</text>
		  	<text class="text">{{desc2}}</text>
		  </view>
		  <view class="go">Go>></view>
	  </view>
	  <view class="image">
	<image src="../../static/images/food2.jpg" mode="aspectFill" class="img"></image>
	  </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const {title,desc1,desc2} = defineProps({
	title:{
		type:String,
		default:'食肉联盟'
	},
	desc1:{
		type:String,
		default:'猪肉 羊肉 牛肉...'
	},
	desc2:{
		type:String,
		default:'低价'
	}
})


// 点击跳转到食物详情页
const handleFoodPreview = () => {
	uni.navigateTo({
		url: '/pages/foodPreview/foodPreview'
	})
}

</script>
<style scoped lang="scss">
	.good-big{
		background-color: white;
		width: 305rpx;
		height: 400rpx;
		border-radius: 30rpx;
		box-shadow: #dddddd 0 3rpx 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		
		.title{
			font-size: 38rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}
		.desc1{
			font-size: 30rpx;
			font-weight: 500;
			line-height: 60rpx;
			
		}
		.desc2{
			font-size: 30rpx;
				font-weight: 500;
				display: flex;
				justify-content: space-between;
				
			.text>.text{
				color: red;
			}
			.go{
				border-radius: 100px;
				width: 120rpx;
				height: 45rpx;
				font-size: 30rpx;
				line-height: 45rpx;
				background-color: #FBD73D;
				color: white;
				border-color: #FBD73D;
				text-align: center;
			}
		}
		
		.image{
			flex: 1;
			.img{
				width:95%;
				margin-top: 25rpx;
				height: 190rpx;
			}
			
		}
	}
</style>
<style></style>